import React, { memo, useState } from 'react'
import DemoWrapper from './style'
import Indicator from '@/base-ui/Indicator'

const Demo = memo(() => {
  const [currIndex,setCurrIndex] = useState(0)

  const names = ['abc','cba','nba','dba','dbm','ysl','lv','gc','adw']
  function clickHandle(isNext=true){
    let index = isNext?currIndex+1:currIndex-1

    if(index > names.length - 1) index = 0
    if(index < 0) index = names.length - 1

    setCurrIndex(index)
  }

  return (
    <DemoWrapper>
      <div className='control'>
        <button onClick={e =>clickHandle(false)}>上一个</button>
        <button onClick={e =>clickHandle(true)}>下一个</button>
      </div>
      <div className="list">
      <Indicator currIndex={currIndex}>
          {
            names.map((item,index) => {
              return (<button key={index}>{item}</button>)
            })
          }
      </Indicator>
      </div>

    </DemoWrapper>
  )
})

export default Demo